// 车辆参数配置组件 - 基于用户需求说明2.1.8.7

import React, { useState } from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Gauge,
  Navigation,
  Car,
  Settings,
  Save,
  RotateCcw,
  AlertTriangle,
  CheckCircle
} from 'lucide-react';

const VehicleParametersPanel: React.FC = () => {
  const { userRole, vehicleStatus, updateControlSettings } = useHmiState();
  const [parameters, setParameters] = useState({
    cruiseSpeed: vehicleStatus.cruiseSpeed || 45,
    laneOffset: 0.0,
    gear: vehicleStatus.gear || 'D',
    acceleration: 1.0,
    deceleration: 1.0,
    steeringSensitivity: 0.8,
    followingDistance: 2.0
  });
  const [isModified, setIsModified] = useState(false);
  const [showSaveConfirm, setShowSaveConfirm] = useState(false);

  // 乘客模式下隐藏车辆参数配置面板
  if (userRole.type === 'passenger') {
    return null;
  }

  const handleParameterChange = (key: string, value: number | string) => {
    setParameters(prev => ({
      ...prev,
      [key]: value
    }));
    setIsModified(true);
  };

  const handleSave = () => {
    // 更新控制设置 - 使用空对象因为ControlSettings接口不包含这些车辆参数
    updateControlSettings({});
    
    setIsModified(false);
    setShowSaveConfirm(true);
    setTimeout(() => setShowSaveConfirm(false), 2000);
  };

  const handleReset = () => {
    setParameters({
      cruiseSpeed: 45,
      laneOffset: 0.0,
      gear: 'D',
      acceleration: 1.0,
      deceleration: 1.0,
      steeringSensitivity: 0.8,
      followingDistance: 2.0
    });
    setIsModified(false);
  };

  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">车辆参数配置</h3>

      {/* 保存确认提示 */}
      {showSaveConfirm && (
        <div className="mb-4 p-3 bg-success-600/20 border border-success-500/30 rounded-lg flex items-center gap-2">
          <CheckCircle size={16} className="text-success-400" />
          <span className="text-sm text-success-400">参数已保存</span>
        </div>
      )}

      {/* 巡航速度 */}
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Gauge size={16} className="text-primary-400" />
          <span className="text-sm font-medium text-gray-300">巡航速度</span>
        </div>
        <div className="flex items-center gap-3">
          <input
            type="range"
            min="20"
            max="80"
            value={parameters.cruiseSpeed}
            onChange={(e) => handleParameterChange('cruiseSpeed', Number(e.target.value))}
            className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
          />
          <div className="w-16 text-center">
            <span className="text-lg font-bold text-white">{parameters.cruiseSpeed}</span>
            <span className="text-xs text-gray-400 ml-1">km/h</span>
          </div>
        </div>
        <div className="text-xs text-gray-500 mt-1">
          范围: 20-80 km/h
        </div>
      </div>

      {/* 车道偏移量 */}
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Navigation size={16} className="text-blue-400" />
          <span className="text-sm font-medium text-gray-300">车道偏移量</span>
        </div>
        <div className="flex items-center gap-3">
          <input
            type="range"
            min="-0.5"
            max="0.5"
            step="0.1"
            value={parameters.laneOffset}
            onChange={(e) => handleParameterChange('laneOffset', Number(e.target.value))}
            className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
          />
          <div className="w-16 text-center">
            <span className="text-lg font-bold text-white">{parameters.laneOffset.toFixed(1)}</span>
            <span className="text-xs text-gray-400 ml-1">m</span>
          </div>
        </div>
        <div className="text-xs text-gray-500 mt-1">
          范围: -0.5 到 0.5 米
        </div>
      </div>

      {/* 挡位选择 */}
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Car size={16} className="text-green-400" />
          <span className="text-sm font-medium text-gray-300">挡位</span>
        </div>
        <div className="grid grid-cols-4 gap-2">
          {['P', 'R', 'N', 'D'].map((gear) => (
            <button
              key={gear}
              onClick={() => handleParameterChange('gear', gear)}
              className={`p-2 rounded-lg text-sm font-medium transition-colors ${
                parameters.gear === gear
                  ? 'bg-primary-600 text-white'
                  : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
              }`}
            >
              {gear}
            </button>
          ))}
        </div>
      </div>

      {/* 加速度 */}
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Settings size={16} className="text-warning-400" />
          <span className="text-sm font-medium text-gray-300">加速度</span>
        </div>
        <div className="flex items-center gap-3">
          <input
            type="range"
            min="0.5"
            max="2.0"
            step="0.1"
            value={parameters.acceleration}
            onChange={(e) => handleParameterChange('acceleration', Number(e.target.value))}
            className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
          />
          <div className="w-16 text-center">
            <span className="text-lg font-bold text-white">{parameters.acceleration.toFixed(1)}</span>
            <span className="text-xs text-gray-400 ml-1">m/s²</span>
          </div>
        </div>
      </div>

      {/* 减速度 */}
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <AlertTriangle size={16} className="text-danger-400" />
          <span className="text-sm font-medium text-gray-300">减速度</span>
        </div>
        <div className="flex items-center gap-3">
          <input
            type="range"
            min="0.5"
            max="3.0"
            step="0.1"
            value={parameters.deceleration}
            onChange={(e) => handleParameterChange('deceleration', Number(e.target.value))}
            className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
          />
          <div className="w-16 text-center">
            <span className="text-lg font-bold text-white">{parameters.deceleration.toFixed(1)}</span>
            <span className="text-xs text-gray-400 ml-1">m/s²</span>
          </div>
        </div>
      </div>

      {/* 转向灵敏度 */}
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Navigation size={16} className="text-purple-400" />
          <span className="text-sm font-medium text-gray-300">转向灵敏度</span>
        </div>
        <div className="flex items-center gap-3">
          <input
            type="range"
            min="0.1"
            max="1.5"
            step="0.1"
            value={parameters.steeringSensitivity}
            onChange={(e) => handleParameterChange('steeringSensitivity', Number(e.target.value))}
            className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
          />
          <div className="w-16 text-center">
            <span className="text-lg font-bold text-white">{parameters.steeringSensitivity.toFixed(1)}</span>
          </div>
        </div>
      </div>

      {/* 跟车距离 */}
      <div className="mb-6">
        <div className="flex items-center gap-2 mb-2">
          <Car size={16} className="text-cyan-400" />
          <span className="text-sm font-medium text-gray-300">跟车距离</span>
        </div>
        <div className="flex items-center gap-3">
          <input
            type="range"
            min="1.0"
            max="5.0"
            step="0.5"
            value={parameters.followingDistance}
            onChange={(e) => handleParameterChange('followingDistance', Number(e.target.value))}
            className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
          />
          <div className="w-16 text-center">
            <span className="text-lg font-bold text-white">{parameters.followingDistance.toFixed(1)}</span>
            <span className="text-xs text-gray-400 ml-1">s</span>
          </div>
        </div>
        <div className="text-xs text-gray-500 mt-1">
          与前车保持的时间间隔
        </div>
      </div>

      {/* 操作按钮 */}
      <div className="flex gap-3">
        <button
          onClick={handleSave}
          disabled={!isModified}
          className={`flex-1 hmi-button-primary flex items-center justify-center gap-2 ${
            !isModified ? 'opacity-50 cursor-not-allowed' : ''
          }`}
        >
          <Save size={16} />
          保存参数
        </button>
        <button
          onClick={handleReset}
          className="hmi-button-secondary flex items-center justify-center gap-2"
        >
          <RotateCcw size={16} />
          重置
        </button>
      </div>

      {/* 当前状态显示 */}
      <div className="mt-4 p-3 bg-gray-800/50 rounded-lg">
        <h4 className="text-sm font-medium text-gray-300 mb-2">当前状态</h4>
        <div className="grid grid-cols-2 gap-2 text-xs text-gray-400">
          <div>巡航速度: {vehicleStatus.cruiseSpeed || 45} km/h</div>
          <div>当前挡位: {vehicleStatus.gear}</div>
          <div>自动驾驶: {vehicleStatus.autonomousMode ? '已激活' : '手动模式'}</div>
          <div>车速: {vehicleStatus.speed} km/h</div>
        </div>
      </div>
    </div>
  );
};

export default VehicleParametersPanel;
